<template>
    <div id="menu" class="no-drag">
        <div class="logo in-block">
            <span>
                <span><i class="czs-computer-l"></i></span>&nbsp;
                <span>{{ title }}</span>
            </span>
        </div>
        <div class="title in-block drag">
            <span>第一季：666阿斯顿</span>
        </div>
        <div class="right in-block">
            <span></span>
            <span class="right-menu mini-window" @click="setWindowStatus('mini')">
                <i class="ai-minus" />
            </span>
            <span class="right-menu max-window" @click="setWindowStatus('max')">
                <i :class="isMaxWin?'ai-shrink':'ai-arrows-alt'" />
            </span>
            <span class="right-menu close" @click="setWindowStatus('close')">
                <i class="ai-close" />
            </span>
        </div>
    </div>
</template>

<script>
    import Config from '../assets/utils/config'
    import { remote } from 'electron'
    const { Menu, dialog, BrowserWindow } = remote

    export default {
        name: "menu-top",
        data () {
            return {
                title : Config.title,
                isMaxWin: false,
            }
        },
        methods: {

            /**
             *  最窗口管理
             *  type mini:最小化,max:最大化,unmax:取消窗口最大化，close:关闭
             */
            setWindowStatus(type) {
                const window = BrowserWindow.getFocusedWindow()
                let IsMaxWin = window.isMaximized();
                if(type == 'mini') {
                    window.minimize();
                }else if(type === 'max') {
                    if(IsMaxWin){
                        window.unmaximize();
                    }else{
                        window.maximize();
                    }
                    this.isMaxWin = !IsMaxWin;
                }else if(type === 'close') {
                    window.close();
                }

            },
        }
    }
</script>

<style scoped lang="less">
    #menu{
        height: 40px;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #2E2E36;
        line-height: 40px;
        position: relative;
    }
    .logo{
        background-color: #202026;
        height: 25px;
        line-height: 27px;
        margin-left: 30px;
        padding:0 15px;
        border-radius: 25px;
        cursor: pointer;
        vertical-align: center;
        font-size: 14px;
    }
    .logo:hover{
        color:#FF652B;
    }
    .title{
        width: calc(~'100% - 260px');
        text-align: center;
        span{
            font-size: 16px;
            width: 100%;
        }
    }
    .right-menu{
        width: 120px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        padding: 0 5px;
    }
    .right-menu:hover{
        color:#FF652B;
    }
    .right-menu i{
        font-size: 19px;
    }
    .right-menu.mini-window i{
        vertical-align: -webkit-baseline-middle;
    }
    .right-menu.max-window i{
        font-size: 16px;
    }
</style>